<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

	<ul id="myTab" class="nav nav-tabs">
		<li class="active"><a href="#tb_showAgentNumber" data-toggle="tab">工号列表</a>
		</li>
		<li><a href="#tb_addAgentNumber" data-toggle="tab">添加工号</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="tb_showAgentNumber">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="panel-body" style="padding-bottom: 0px;">

					<div id="toolbar" class="btn-group">
						<button id="btn_allot" type="button" class="btn btn-default">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>分配
						</button>
						<button id="btn_untie" type="button" class="btn btn-default">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>解绑
						</button>
						<button id="btn_delete" type="button" class="btn btn-default">
							<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
						</button>
					</div>
					<table id="tb_agent"></table>
				</div>

				<!-- .boxright -->
			</div>
		</div>
		<div class="tab-pane fade" id="tb_addAgentNumber">
			<div class="col-sm-4 mar"></div>
			<div class="col-sm-4 mar">
				<div>
					<form id="agentNumberInfo">
						<div class="form-group">
							<div class="input-group mar">
								<span class="input-group-addon">工号</span> <input id="agentNumber"
									name="agentNumber" class="form-control" type="text">
							</div>
						</div>
						
					</form>
					<div class="mar">
						<input type="button" id="submitAgentInfo" class="btn btn-success"
							value="提交"> <input type="button" id="resetAgentInfo"
							class="btn btn-warning" value="重置">
					</div>
				</div>

			</div>
			<div class="col-sm-4 mar"></div>
		</div>
	</div>
	<!-- 分配员工号 -->
	<div class="modal fade" id="allotModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">分配工号</h4>
				</div>
				
				<form id="allotForm">
					<div class="">
						<div style="height: auto; margin-bottom: 10px;">
							<div class="col-sm-12 mar">
								<div class="input-group">
									<span class="input-group-addon">员工</span>
									<input id="personalName" readonly name="name"  class="form-control" type="text">
									<span class="input-group-btn">
									<button class="btn btn-default" id="selectUser" type="button">
									<span class="glyphicon glyphicon-search" style="line-height : 1.42857143" aria-hidden="true"></span></button></span>
								
								</div>
							</div>
														
						</div>
						<div class="col-md-12 col-sm-12 col-xs-12 text-center"
							style="border-bottom: 1px solid #e5e5e5; padding-bottom: 15px; margin-bottom: 15px;">
						</div>
					</div>
					<div class="modal-footer" style="border: 0px;">
						<input type="button" id="submitInfo" class="btn btn-success"
							value="保存">
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>

				</form>
				
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

<div class="modal fade" id="userModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">分配人员信息</h4>
				</div>
				
				<div class="">
					<div style="height: auto; margin-bottom: 10px;">
						<div class="col-sm-12 mar">
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade in active" id="tb_showAgentNumber">
									<div class="col-md-12 col-sm-12 col-xs-12">
										<div class="panel-body" style="padding-bottom: 0px;">						
											<table id="tb_user"></table>
										</div>
						
										<!-- .boxright -->
									</div>
								</div>
								
							</div>
						</div>														
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12 text-center"
						style="border-bottom: 1px solid #e5e5e5; padding-bottom: 15px; margin-bottom: 15px;">
					</div>
				</div>

				<div class="modal-footer" style="border: 0px;">
					<input type="button" id="selectUserInfo" class="btn btn-success"
						value="选择">
					<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
				</div>			
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

<script type="text/javascript">
//实现模态框的拖动
$(document).on("show.bs.modal", ".modal", function() {
	$(this).draggable({
		handle : ".modal-header" // 只能点击头部拖动
	});
	$(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
});
//清除模态框 表单数据
$('#allotModal').on('hidden.bs.modal', function() {

	$("#allotForm")[0].reset();
});

	$(function() {
		TableInit();
		formValidator();
	})

	// 初始化Table
	var rowInfo = null;
	function TableInit() {
		$("#tb_agent").bootstrapTable("refresh");
		$("#tb_agent").bootstrapTable({
			url : 'agent/page', // 请求后台的URL（*）
			method : 'post', // 请求方式（*）
			striped : true, // 是否显示行间隔色
			cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination : true, // 是否显示分页（*）
			sortable : false, // 是否启用排序
			sortOrder : "asc", // 排序方式
			queryParams : queryParams,// 传递参数（*）
			sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数（*）
			pageList : [ 10, 20 ], // 可供选择的每页的行数（*）
			contentType : "application/x-www-form-urlencoded",
			strictSearch : true,
			clickToSelect : true, // 是否启用点击选中行
			idField : "id", // 每一行的唯一标识，一般为主键列
			responseHandler : responseHandler,
			singleSelect : true,
			columns : [ {
				field : 'ck',
				checkbox: true,
				
			}, {
				field : 'agentNumber',
				title : '员工工号'
			}, {
				field : 'personalName',
				title : '员工姓名'
			}],
			onCheck: ckeckRow,//点击选中一行,获取该行的信息
			onUncheck : unCkeckRow//点击取消选中一行,销毁已获取该行的信息
		});

	};
	function ckeckRow(row){
		
		rowInfo = row ;//row 该行的信息
		
	}
	function unCkeckRow(row){
		
		rowInfo = null ;
		
	}
	// 得到查询的参数
	function queryParams(params) {
		var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			limit : params.limit, // 页面大小
			offset : params.offset
		};
		return temp;
	};

	// 返回数据处理
	function responseHandler(result) {
		console.log(result);
		var resultCode = result.status;// 在此做了错误代码的判断
		if (resultCode != 200) {
			alert("错误代码" + result.msg);
			return;
		}
		// 如果没有错误则返回数据，渲染表格
		return {
			total : result.result.total,
			rows : result.result.list
		};
	};

	//表单验证
	function formValidator() {
		$('#agentNumberInfo').bootstrapValidator({
			excluded : [ ':disabled', ':hidden', ':not(:visible)' ],//指定不验证的情况,比如被禁用的或者被隐藏的
			feedbackIcons : {//根据验证结果显示的各种图标
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				agentNumber : {
					validators : {
						notEmpty : {
							message : '工号不能为空'
						},
						regexp : {//正则验证
							regexp : /^[0-9]{4}$/,
							message : '请输入4位数字的工号'
						},
						remote : {
							//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
							url : 'agent/check',
							message : '该工号已存在',//提示消息
							delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
							type : 'POST'//请求方式

						}
					}
				}
			}
		});
	}
	//新增分机号
	$("#submitAgentInfo").click(function() {
		 //$("#extensionNumberInfo").bootstrapValidator('validate');//提交验证
         if ($("#agentNumberInfo").data('bootstrapValidator').isValid()) {
		$.ajax({
			url : "agent/add",
			data : $("#agentNumberInfo").serialize(),
			type : "post",
			dataType : "json",
			success : function(data) {
				
				if (data.status == 200) {
					swal({
						title : "工号添加成功",
						type : "success",
						confirmButtonText : "确定"
					}, function() {
						TableInit();
						destroyAndAddValidator();
					});
				}else{
					swal({
						title : "工号添加失败",
						type : "error"})					
					}
				
			},
			error : function(data){
				console.log("+++^^^^+++")
			}
		});
         }
	})
	//重置新增表单信息
	$("#resetAgentInfo").click(function() {
		destroyAndAddValidator();
	})
	//验证销毁重构
	function destroyAndAddValidator() {
		$("#agentNumberInfo")[0].reset();
		$("#agentNumberInfo").data('bootstrapValidator').destroy();
		$('#agentNumberInfo').data('bootstrapValidator', null);
		formValidator();
	}
	//解绑分机号
$("#btn_untie").click(function(){
	
	
	console.log(rowInfo);
	
	if (rowInfo == null) {
		alert("请选择要解绑的工号")
	}   else  {
		if(rowInfo.personalName == null){
			alert("工号未分配，无需解绑")
		}else{
			if(confirm("确定要解绑吗？")){			
				
		$.ajax({
			url : "agent/untie",
			data : {
				"loginName" : rowInfo.personalLoginName ,
				"id" : rowInfo.id 
				},
			type: "post",
			dataType : "json",
			success : function(data){
				if(data.status == 200){
					swal({
						title : "工号解绑成功",
						type : "success",
						confirmButtonText : "确定"
					}, function() {
						TableInit();
						//destroyAndAddValidator();
					});
				}
			}
		})
			}
		}
	} 
	
})
//删除分机号
$("#btn_delete").click(function(){
	
	console.log(rowInfo);
	if (rowInfo == null) {
		alert("请选择要删除的工号")
	}  else  {
		if(rowInfo.personalLoginName !=null){
			alert("工号已分配,请解绑后删除")
		}else{
			if(confirm("确定要删除吗？")){			
			
		$.ajax({
			url : "agent/delete",
			data : {				
				"id" : rowInfo.id 
				},
			type: "post",
			dataType : "json",
			success : function(data){
				if(data.status == 200){
					swal({
						title : "工号删除成功",
						type : "success",
						confirmButtonText : "确定"
					}, function() {
						TableInit();
						//destroyAndAddValidator();
					});
				}
			}
		})
		}
	}
	}
	
})

//分配分机号
$("#btn_allot").click(function(){
	console.log(rowInfo)
	if(rowInfo == null){
		alert("请选择工号")
	}else if(rowInfo.personalLoginName !=null){
		alert("该工号已分配")
	}else		
		$("#allotModal").modal("show")
		
})


$("#selectUser").click(function(){
	$("#userModal").modal("show")
	userTableInit();
})
//分配员工信息
var userRowInfo ;
function userTableInit() {
		$("#tb_user").bootstrapTable("refresh");
		$("#tb_user").bootstrapTable({
			url : 'user/userNo', // 请求后台的URL（*）
			method : 'post', // 请求方式（*）
			queryParams : userqueryParams,// 传递参数（*）
			striped : true, // 是否显示行间隔色
			cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			sortable : false, // 是否启用排序
			sortOrder : "asc", // 排序方式			
			contentType : "application/x-www-form-urlencoded",
			pagination : true, // 是否显示分页（*）
			sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数（*）
			pageList : [ 10, 20 ], // 可供选择的每页的行数（*）
			clickToSelect : true, // 是否启用点击选中行
			idField : "id", // 每一行的唯一标识，一般为主键列
			responseHandler : userResponseHandler,
			singleSelect : true,
			columns : [ {
				field : 'ck',
				checkbox: true,
				
			}, {
				field : 'companyId',
				title : '公司' ,
				formatter : companyFormat
			}, {
				field : 'officeId',
				title : '部门',
				formatter : companyFormat
			}, {
				field : 'name',
				title : '员工姓名'
			} ],
			onCheck: checkUserRow,
			onUncheck:unCheckUserRow
		});

	};
function userqueryParams(params){
	var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			limit : params.limit, // 页面大小
			offset : params.offset
		};
		return temp;
}
function userResponseHandler(result){
	console.log(result);
	var resultCode = result.status;// 在此做了错误代码的判断
	if (resultCode != 200) {
		alert("错误代码" + result.msg);
		return;
	}
	// 如果没有错误则返回数据，渲染表格
	return {
		total : result.result.total,
		rows : result.result.list
	};
}
function checkUserRow(row){
	console.log(row);
	 
		userRowInfo = row;
}
function unCheckUserRow(row){
	console.log(row);
	userRowInfo = null;
}
function companyFormat(value, row, index ){
	var comName = "";
	$.ajax({
		url : "office/preUpdate",
		data : {"id" : value} ,
		dataType : "json" ,
		type : "post" ,
		async : false,
		success : function (data){
			//console.log(data)
			if (data.status == 200){
				var r = data.result 
				//console.log(r.name);
				comName = r.name
			}
		}
	})
	return comName ;
		
}
$("#selectUserInfo").click(function(){
	console.log("^^^")
	console.log(userRowInfo)
	if(userRowInfo == null){
		alert("请选择员工")
	}else {
		$("#personalName").val(userRowInfo.name);
		$("#userModal").modal("hide");
	}
})
$("#submitInfo").click(function(){
	$.ajax({
		url : "agent/allot" ,
		data : {
			//用户表所需的信息
			"no" : rowInfo.agentNumber ,//分配后,用户表所需的no
			"loginName" : userRowInfo.loginName,//分配后,用户表所需的loginName
			//工号表表所需的信息
			"id" : rowInfo.id ,//分配后 ,工号表所需的ID信息
			"personalLoginName" : userRowInfo.loginName ,	//分配后,工号表所需的	personalLoginName	
			"personalName" : userRowInfo.name  //分配后,工号表所需的	personalName	
		},
		type : "post" ,
		dataType : "json" ,
		success : function(data){
			if (data.status == 200){
				swal({
					title : "工号分配成功",
					type : "success",
					confirmButtonText : "确定"
				}, function() {
					$("#allotModal").modal("hide");
					TableInit();
					//destroyAndAddValidator();
				});
			}
		}
	});
})
</script>
</html>